

import React, { FC, useEffect, useState } from 'react'
import MyHead from '../../components/MyHead'
import Photo from "../../assets/images/photo.png"
import { inject, observer } from 'mobx-react'
import { connect } from 'react-redux'
import { getMyCart, getMyCollects, getMyLikes, getuserInfoAsync } from './../../redux/actions/index';
import "./index.scss"
import { useNavigate } from 'react-router-dom'
import { List, Button , Mask , ProgressCircle, Toast } from "antd-mobile"
import {
    UnorderedListOutline,
    PayCircleOutline,
    SetOutline,
    AntOutline,
    HandPayCircleOutline,
    ScanningOutline,
    TransportQRcodeOutline,
    AppOutline,
    MessageOutline,
    MessageFill,
    UserOutline,
    TeamOutline,
    AppstoreOutline,
    TruckOutline,
} from 'antd-mobile-icons'
import MyAvatar from './MyAvatar'

const Mine: FC<{
    // 给类型
    info?: any,
    userInfo: any,
    count: number,
    dispatch: any,
    myLikes:any,
    myCollects:any,
    myCart:any
}> = ({
    userInfo,
    count,
    dispatch,
    myLikes,  //下面解构后，这里也需要
    myCollects,
    myCart,
}) => {
        const router = useNavigate()
        const [cache,setCache]= useState<number>(Math.ceil(Math.random() * 100 ))
        const [visible,setVisible] = useState<boolean>(false)
        let [percent,setpercent] = useState<number>(0)
        let timer:any = null 
        useEffect(()=> {
            // 第一个参数为空，第二个值为回调   将异步变为了同步
            // 局部作用域 和外面的userInfo 不会有冲突
            dispatch(getuserInfoAsync({},(userInfo:any) => {
                //  获取值： 页面通过dispatch 来获取 getMyLike 的值（注意这里值在）
                //    点赞
                dispatch(getMyLikes({
                    //   条件  得到数据
                    phone: userInfo.phone
                }))
                dispatch(getMyCollects({
                    phone:userInfo.phone 
                }))

                dispatch(getMyCart({
                    phone:userInfo.phone 
                }))
               
            }))

           
        }, [])
        // 修改密码
        const tochangepass=()=>{
            dispatch({
                type:"getuserInfoAsync",
                // payload:null 
            })
            console.log(userInfo);
            router('/changepass')
           
        }

        // 退出登录 
        const logoutAction = ()=>{
            dispatch({
                type:"getuserInfoAsync",
                payload:null 
            })
        }
        const showMask =  ()=>{
            setVisible(true)
            timer = setInterval(()=>{
                if(percent<100){
                    percent+=5;
                    setpercent(percent)
                }else{
                    clearInterval(timer)
                    timer = null;
                    setpercent(0)
                    setVisible(false)
                    setCache(0)
                    Toast.show({
                        content:"缓存清除成功"
                    })
                }
            },200)
        }
        return (
            <div className='mine'>
                <MyHead title="个人中心" back={false} />
                <div className="mine-top">
                    <div className="left">
                        <MyAvatar/>
                    </div>
                    <div className="right">
                        {
                            userInfo ? <div >
                                {userInfo.username} -  {userInfo.phone}
                            </div>
                                : <h2 onClick={() => router('/login')} style={{ fontSize: 48 }}>立即登录  {count} </h2>
                        }
                    </div>
                </div>
                <ul className="list">
                    <li className="liitem">
                        <img src="" width="56px" height="56px" alt="" />
                        <div className="common-p">电影订单</div>
                    </li>
                    <li className="liitem" onClick={()=>{}}>
                        <img src="" width="56px" height="56px" alt="" />
                        <div className="common-p">商品订单</div>
                    </li>
                </ul>
                <div className="mine-box">
                    <List >
                        {
                            userInfo?
                                <div>
                                    <List.Item extra={myLikes.length} clickable prefix={<UnorderedListOutline />} onClick={() => { router('/myLikes')}}>
                                        我的点赞
                                    </List.Item>
                                    <List.Item extra={myCollects.length} clickable prefix={<PayCircleOutline />} onClick={() => {router('/myCollects') }}>
                                        我的收藏
                                    </List.Item>
                                    <List.Item extra={5} clickable prefix={<UserOutline />} onClick={() => {router('/myComments') }}>
                                        我的评论
                                    </List.Item>
                                    <List.Item extra={5} clickable prefix={<HandPayCircleOutline />} onClick={() => { }}>
                                        我的优惠券
                                    </List.Item>
                                    <List.Item extra={599} clickable prefix={<ScanningOutline />} onClick={() => { }}>
                                        我的余额
                                    </List.Item>
                                    <List.Item clickable prefix={<TransportQRcodeOutline />} onClick={() => { }}>
                                        我的信息
                                    </List.Item>
                                    <List.Item extra={myCart.length} clickable prefix={<TruckOutline />} onClick={() => { router('/main/cart')}}>
                                        我的购物车
                                    </List.Item>
                                    <List.Item clickable prefix={<TeamOutline />} onClick={tochangepass}>
                                        修改密码
                                    </List.Item>
                                </div>
                                :<div>
                                    <List.Item extra={5} clickable prefix={<AntOutline />} onClick={() => { }}>
                                        我的足迹
                                    </List.Item>
                                    <List.Item onClick={showMask} extra={cache+'M'} clickable prefix={<TransportQRcodeOutline />}>
                                        清除缓存
                                    </List.Item>
                                    <List.Item clickable prefix={<TruckOutline />} onClick={() => { }}>
                                        设置
                                    </List.Item>
                                    <List.Item clickable prefix={<MessageOutline />} onClick={() => { }}>
                                        帮助和客服
                                    </List.Item>
                                    <List.Item clickable prefix={<TeamOutline />} onClick={() => { }}>
                                        公告
                                    </List.Item>
                                    <List.Item clickable prefix={<AppOutline />} onClick={() => { }}>
                                        联系我们
                                    </List.Item>
                                    <List.Item clickable prefix={<SetOutline />} onClick={() => { }}>
                                        公司简介
                                    </List.Item>
                                </div>
                        }
                    </List>
                </div>

                {
                    userInfo && <div className="mbtn">
                        <Button onClick={logoutAction} color="default" block size="large" >退出登录</Button>
                    </div>
                }

                <Mask visible={visible} style={{height:'100%'}}>
                    <div className="center" style={{width:'100%',height:'100%',display:'flex',justifyContent:'center',alignItems:'center'}}>
                        <ProgressCircle
                            percent={percent}
                            style={{
                                '--fill-color': '#FF3141',
                                '--track-width': '7px',
                                '--size': '240px' 
                            }}
                            >
                            <span style={{color:"#fff" }}> {percent} % </span>
                        </ProgressCircle>
                    </div>
                </Mask>
            </div>
        )
    }

// @inject('info')
// @observer
// export default inject('info')(observer(Mine))

export default connect(
    // 输入逻辑
    (state: any) => {
        console.log(state)
        return {
            // 得到数据后 解构  这里解构后，上面也需要
            userInfo: state.getIn(['data', 'userInfo']),
            count: state.getIn(['data', 'count']),
            myLikes:state.getIn(['data','myLikes']), //点赞
            myCollects:state.getIn(['data','myCollects']),  //收藏
            myCart:state.getIn(['data','myCart'])
        }
    }
    // 输出逻辑 
)(Mine);